<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount } from 'vue';


onMounted(() => {
    // 创建图
    var chartDom = document.getElementById('graph');
    var myChart = echarts.init(chartDom);
    var option;

    // 图相关配置
    option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        },
        yAxis: {
            type: 'value',
            splitNumber: 3,
        },
        color: ['#f896b0'],
        grid: {
            left: '60px',
            right: '-50px',
            top: '20px',
            bottom: '50px'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        series: [
            {
                data: [145, 214, 400, 991, 847, 258, 100, 100, 945, 100, 784, 214],
                type: 'line',
                smooth: true,
                areaStyle: {},
                showSymbol: false
            }
        ]
    };

     // 设置图形配置
    option && myChart.setOption(option);

    // 监听窗口 resize 事件
    const handleResize = () => {
        myChart?.resize();
    };

    // 添加窗口变化的监听事件
    window.addEventListener('resize', handleResize);

    // 组件卸载前移除监听，防止内存泄漏
    onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize);
        // 销毁图表实例
        myChart?.dispose();
    });
})
</script>

<template>
<div class="box">
    <div class="title"><img src="@/assets/images/home/首页各个功能标题前图标.png" alt="" width="22px" height="22px" style="margin-right: 10px">用户访问</div>
    <div class="graph-box">
        <div class="graph-title">单位：人数</div>
        <div class="graph-box-bottom" id="graph"></div>
    </div>
</div>
</template>

<style scoped>
.box {
    width: 1200px;
    height: 530px;
    margin: 0 auto;
    margin-top: 54px;
    /* background-color: pink; */
}
.title {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding-left: 30px;
  padding-bottom: 30px;
}
.graph-box {
    height: 476px;
    background-color: white;

}
.graph-title {
    padding: 20px 0px 15px 20px;
    font-size: 14px;
    color: rgba(0, 0, 0, .5)
}
.graph-box-bottom {
    height: 421px;
    /* background-color: red; */
}
</style>
